<!-- 块级导航 -->
<template>
  <div class="quick-nav">
    <mt-swipe :auto="0">
      <mt-swipe-item
        v-for="(quickListData, index) in quickListDatas"
        :key="index"
      >
        <ul>
          <li v-for="(quickList, index) in quickListData.children" :key="index">
            <img :src="quickList.img" />
            <span>{{ quickList.title }}</span>
          </li>
        </ul>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到components对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      quickListDatas: [
        {
          id: 1,
          children: [
            {
              id: 1001,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 1002,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 1003,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 1004,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 1005,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 1006,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 1007,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 1008,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 1009,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 1010,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
          ],
        },
        {
          id: 2,
          children: [
            {
              id: 2001,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 2002,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 2003,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 2004,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 2005,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 2006,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 2007,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 2008,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 2009,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
            {
              id: 2010,
              img:
                "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
              title: "潮流服饰",
            },
          ],
        },
      ],
    };
  },
};
</script>
<style lang="less">
.quick-nav {
  width: 100%;
  height: 20rem;
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 20%;
      height: 9rem;
      text-align: center;
      img {
        width: 7rem;
        height: 7rem;
      }
    }
  }

.mint-swipe-indicators {
  bottom: 5px;
  .mint-swipe-indicator {
    background: #f00;
    width: 1.6rem;
    height: 0.5rem;
    border-radius: 0;
    margin: 0;
    opacity: 0.5;
  }
  .is-active {
    opacity: 1;
  }
}
}
</style>